<form class="layui-form seller-form"  action="" >
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">用户名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="user_name" lay-verify="title" placeholder="请输入用户名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">订单编号：</label>
            <div class="layui-input-inline">
                <input type="text" id="bill_id" name="bill_id" lay-verify="title" placeholder="请输入订单编号" autocomplete="off" value="{$bill_id}" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">下单时间：</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="date" placeholder="开始时间 到 结束时间" autocomplete="off"
                    class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">订单状态：</label>
            <div class="layui-input-inline">
                <select name="status" id="status">
                    <option value="">-- 全部 --</option>
                    {foreach $status as $key=>$vo}
                    <option value="{$key}">{$vo}</option>
                    {/foreach}
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="search"><i class="iconfont icon-chaxun"></i>筛选</button> 
        </div>

    </div>
</form>

<div class="table-body">
	<table id="deviceLog" lay-filter="deviceLog"></table>
</div>

<script>
    layui.use(['table','form','layer','laydate'],function(){
        var layer = layui.layer, table = layui.table,form = layui.form,date = layui.laydate;
        //时间插件
        date.render({
            elem: '#date',
            range: '到',
            format: 'yyyy-MM-dd'
        });

        //执行渲染
        table.render({
            elem: '#deviceLog', //指定原始表格元素选择器（推荐id选择器）
            height: 'full-115',
            cellMinWidth: '80',
            page: 'true',
            limit:'20',
            id:'deviceLog',
            url: "{:url('deviceLog/index')}" + '?bill_id={$bill_id}',
            cols: [[ //标题栏
                {type:'numbers'},
                {field: 'bill_id', title: '订单编号',align:'center',width:200},
                {field: 'typename', title: '使用场景',align:'center',width:100},
                {field: 'logo', title: '设备品牌',width:100,align:'center',templet: function(data){
                    return '<a href="javascript:void(0);" onclick=viewImage("'+data.logo+'")><image style="max-width:30px;max-height:30px;" src="'+data.logo+'"/></a>';
                }},
                {field: 'area', title: '设备位置',align:'center',width:260},
                {field: 'nickname', title: '用户昵称',align:'center',width:100},
                {field: 'money', title: '费用',align:'center',width:100},
                {field: 'status', title: '状态', align: 'center', width: 100},
                {field: 'ctime', sort: true, title: '下单时间' ,align:'center', width: 160},
            ]] //设置表头
            //,…… //更多参数参考右侧目录：基本参数选项
        });
 
        form.on('submit(search)', function(data){
            layui.table.reload('deviceLog', {
                where: data.field
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        }); 
    })
</script>

